<template>
  <div class="home">
    <div class="todo_header_container">
      <el-input v-model="todoText" placeholder="请输入内容"></el-input>
      <div class="todo_header_button">
        <el-button type="primary"
        @click="onClickAddTodo">添加事项</el-button>
      </div>
    </div>
    <div class="todo_list_container">
      <div class="todo_list_wrapper">
        <div>
          <TodoItem v-for="(item) in todos"
          :key="item.todoText"
          :item="item"
          @delete="deleteTodo"/>
        </div>
      </div>
      <div class="todo_list_bottom_bar">
        <div>{{`${penddingTodoItems.length}条剩余`}}</div>
        <div>
          <el-radio-group v-model="radio"
          @change="onChange">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="已完成"></el-radio-button>
            <el-radio-button label="未完成"></el-radio-button>
          </el-radio-group>
        </div>
        <div>
          <el-button type="text"
          @click="clearDoneTodos">清除已完成</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import TodoItem from  "../components/TodoItem";

export default {
  name: 'Home',
  components: {
    TodoItem
  },
  data(){
    return{
      todoText:"",
      radio:"全部",
      todos:[]
    }
  },
  computed:{
    isRepetition:function(){
      return this.$store.state.isRepetition;
    },
    success:function(){
      return this.$store.state.success;
    },
    allTodoItems:function(){
      return this.$store.getters.allTodoItems;
    },
    doneTodoItems:function(){
      return this.$store.getters.doneTodoItems;
    },
    penddingTodoItems:function(){
      return this.$store.getters.penddingTodoItems;
    }
  },
  mounted(){
    this.todos = this.allTodoItems;
  },
  methods:{
    onClickAddTodo(){
      if(this.todoText.length === 0){
        this.$message.error('请输入内容');
        return;
      }

      var tempTodo = {
        todoText:this.todoText,
        status:false
      };
      this.$store.commit("ADD_TODO",tempTodo);
      if(this.success){
        this.$message({
          message: '添加成功',
          type: 'success'
        });
      }

      if(this.isRepetition){
        this.$message.error('添加todo重复');
      }

      this.$store.commit("CHANGE_STATUS");
    },
    onChange(){
      switch (this.radio){
        case "全部":
          this.todos = this.allTodoItems;
          break;
        case "已完成":
          this.todos = this.doneTodoItems;
          break;
        case "未完成":
          this.todos = this.penddingTodoItems;
          break;
        default:
          break;
      }
      console.log(this.todos)
    },
    clearDoneTodos(){
      this.$store.commit("CLEAR_DOEN");
      switch (this.radio){
        case "全部":
          this.todos = this.allTodoItems;
          break;
        case "已完成":
          this.todos = this.doneTodoItems;
          break;
        case "未完成":
          this.todos = this.penddingTodoItems;
          break;
        default:
          break;
      }
    },
    deleteTodo(){
      switch (this.radio){
        case "全部":
          this.todos = this.allTodoItems;
          break;
        case "已完成":
          this.todos = this.doneTodoItems;
          break;
        case "未完成":
          this.todos = this.penddingTodoItems;
          break;
        default:
          break;
      }
    }
  }
}
</script>

<style>
.todo_header_container
{
  width: 600px;
  height: 40px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}

.todo_header_button
{
  margin-left: 20px;
}

.todo_list_container
{
  width: 500px;
  height: 400px;
  margin-top: 20px;
  border: 1px solid lightgray;
}
.todo_list_wrapper
{
  width: 100%;
  height: 340px;
  overflow: scroll;
}

.todo_list_bottom_bar
{
  width: 100%;
  height: 60px;
  border-top: 1px solid lightgray;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
}
</style>
